<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: var(--bg, white);
            /*使用原生css变量必须用var函数来实现，变量名以--开头 */
            color: var(--color, black)
        }
    </style>


</head>

<body>
    <div class="theme">
        <button value="dark">dark</button>
        <button value="red">red</button>
        <button value="light">light</button>
    </div>
    <article>
        <p>主题测试，主题更改</p>
        <p>主题测试，主题更改</p>
        <p>主题测试，主题更改</p>
        <p>主题测试，主题更改</p>
        <p>主题测试，主题更改</p>
        <p>主题测试，主题更改</p>
    </article>

    <script>
        var arr = [1, 1.1, 5, 6, 4]
        var root = document.documentElement //获取html中所有的节点
        var buttons = document.querySelectorAll('.theme > button') //查找所有的button
        buttons.forEach(function (btn) {
            btn.addEventListener('click', swithFun)
        })
        function swithFun(e) {
            switch (e.target.value) {
                case 'dark':
                    root.style.setProperty('--bg', 'black')
                    root.style.setProperty('--color', 'white')
                    break
                case 'red':
                    root.style.setProperty('--bg', 'red')
                    root.style.setProperty('--color', 'white')
                    break
                case 'light':
                    root.style.setProperty('--bg', 'green')
                    root.style.setProperty('--color', 'white')
                    break
            }
        }
    </script>
</body>

</html>